<template>
  <div>
    <div>
      <slot name="header-button"></slot>
    </div>

    <div class="tableflex">
      <div class="table">
        <el-table style="width:100%"
          :data="data"
          v-bind="elProps"
          @selection-change="handleSelectionChange"
          @expand-change="handleExpandChange"
          ref="multipleTableRef"
          @select="select"
          @select-all="selectAll"
          :empty-text="emptyText"
        >
          <el-table-column type="selection" v-if="elProps.selection" />
          <el-table-column
            label="序號"
            type="index"
            width="100px"
            :index="elProps.index"
            v-if="elProps.indexType"
          ></el-table-column>
          <slot name="expand"></slot>
          <el-table-column
            v-for="(value, key) in column"
            :key="key"
            :label="value"
            :prop="key"
            v-bind="elProps"
            :width="controlWidth[key]"
          >
            <template #default="{ row, column, $index }">
              <div class="txth" :title="row[key]">
                <slot
                  :row="row"
                  :column="column"
                  :index="$index"
                  :propname="key"
                  >{{row[key]}}</slot>
              </div>
            </template>
          </el-table-column>
          <slot name="operateone"></slot>
          <slot name="search_operate"></slot>
          <el-table-column
            label="操作"
            v-if="elProps.operate"
            class-name="columnTable"
             fixed="right"
             min-width="200"
          >
            <template #default="scope">
              <template v-for="item in rowControl" :key="item">
                <el-button
                  v-if="elProps.operateType == 'button'"
                  :type="controlAttr[item].type"
                  :underline="false"
                  @click="onRowControl(scope, item)"
                  >{{ controlText[item].text }}
                </el-button>
                <template v-else>
                  <el-link  v-if="scope.row.id == 1 && scope.row.role_name == '超級管理員'"></el-link>
                  <el-link
                    v-else
                    :type="controlAttr[item].type"
                    :underline="false"
                    @click="onRowControl(scope, item)"
                    :icon="controlAttr[item].icon"
                    >{{ controlText[item].text }}
                  </el-link>
                </template> 
              </template>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- <div class="r" v-if="elProps.freeOperate">
        <el-table
          :data="data"
          v-bind="elProps"
          @selection-change="handleSelectionChange"
          @expand-change="handleExpandChange"
          style="width: 210px; margin-left: 20px"
        >
          <el-table-column label="操作" v-if="elProps.freeOperate" >
            <template #default="scope">
              <div class="flex justify-around">
                <template v-for="item in rowControl" :key="item">
                  <el-link
                    :type="controlAttr[item].type"
                    :underline="false"
                    @click="onRowControl(scope, item)"
                    :icon="controlAttr[item].icon"
                    >{{ controlText[item].text }}
                  </el-link>
                </template>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div> -->
    </div>

    <div class="pagination-box" v-if="Object.keys(page).length">
      <el-pagination
        v-if="page"
        @size-change="handlePageChange($event, 'size')"
        @current-change="handlePageChange($event, 'current')"
        :current-page="page.current_page"
        :page-sizes="page.page_size || [10, 20, 30, 40]"
        :page-size="page.per_page"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
      <el-button
        type=""
        circle
        icon="RefreshRight"
        style="margin-left: 5px"
        @click="onRefresh"
      >
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { controlAttr, controlText, } from "./config.js";
import { Edit, View as IconView } from "@element-plus/icons-vue";
import { ElMessageBox, ElMessage } from "element-plus";
// console.log(controlAttr);
const props = defineProps({
  data: [Object, Array],
  page: Object,
  column: Object,
  control: Object,
  rowControl: Object,
  elProps: Object,
  disabled: Object,
  controlWidth:Object,
  emptyText:String
});
/**
 *  行内按钮操作
 *  @scope {object} 行数据
 *  @type {string}  <edit/del/power/detail>按钮标识
 */
const emit = defineEmits([
  "row-control-click",
  "selection-change",
  "page-change",
  "pageRefresh",
  'select-click',
  'select-all'
]);
const onRowControl = async (scope, item) => {
  const type = {
    del: "确认要删除？",
    logout: "确认要注销？",
    reset: "确认要重置？",
  };
  if (["del", "logout", "reset"].includes(item)) {
    ElMessageBox.confirm("此操作将永久删除该文件, 是否继续?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        ElMessage.success({
          message: "删除成功!",
        });
      })
      .catch(() => {
        ElMessage.info({
          message: "已取消删除",
        });
      });
  }
  emit("row-control-click", { scope, type: item });
};

/**
 *  多选框操作
 *  @rows {arry} 选中行数据
 */
const multipleTableRef = ref('')
const handleSelectionChange = (rows) => {
  emit("selection-change", rows);
};
const select = (selection, row)=>{
    emit("select-click", selection, row);
}
const selectAll = (selection)=>{
    emit("select-all", selection);


}
/* 行内展开操作
 *  @row {object} 当前点击的行
 *  @expanded {array} 已经展开的行
 */
const handleExpandChange = (row, expanded) => {
  // console.log(row, expanded);
  // this.$emit("expand-change", { row, expanded });
};
/**分页操作
 *  @e {number} 每页条数/当前页
 *  @type {string} <size|current>改变类型
 */
const handlePageChange = (e, type) => {
  emit("page-change", { e, type });
};
const onRefresh = () => {
  emit("pageRefresh");
};
defineExpose({
  multipleTableRef
})
</script>

<style scoped lang='less'>
.pagination-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}
.button :deep(.el-icon) {
  color: #fff;
}

.proTable {
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.12);
}
.proTable:hover {
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.3);
}
.tableflex {
  // display: flex;
  // justify-content: space-between;
  // margin-top: 30px;
}

.table {
  flex: 1;
  display: flex;
  justify-content: space-between;
}
.r {
  display: flex;
  align-items: stretch;
  :deep(.el-table) {
    display: flex;
    flex-direction: column;
    height: 100%;
    .el-scrollbar__view,
    .el-table__body {
      height: 100%;
    }
  }
}

</style>